<template>
  <div class="square">
    <div class="imgBox">
      <div class="singerImg" v-for="item in singerList" :key="item.id">
        <img :src="item.picUrl" alt />
        <p class="name">{{item.name}}</p>
        <p class="text">
          <span>专辑：{{item.albumSize}}</span>
          <span>歌曲：{{item.musicSize}}</span>
        </p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  props: {},
  data() {
    return {
      singerList: ""
    };
  },
  watch: {},
  computed: {},
  methods: {
    // 歌手请求
    getSinger() {
      this.$http("/top/artists").then(res => {
        // console.log(res);
        this.singerList = res.data.artists;
        console.log(this.singerList);
      });
    }
  },
  created() {
    this.getSinger();
  },
  mounted() {}
};
</script>
<style lang="scss" scoped>
@import "~@/assets/css/common.scss";
.square {
  width: 100%;
  padding: vw(10) vw(20);
  .imgBox {
    width: 100%;
     height: auto;
    column-count: 2;
    .singerImg {
      width: 100%;
      height: auto;
      /*break-inside: avoid;*/
      border: vw(1) solid #aaa;
      margin-bottom: vw(15);
      overflow: hidden;
      img {
        width: 100%;
        height: auto;
      }

      .name {
        text-align: center;
        font-size: vw(16);
        font-weight: bold;
      }
      .text {
        width: 100%;
        display: flex;
        justify-content: space-around;
        align-items: center;

        padding: vw(4) 0 vw(10);
        span {
          font-size: vw(14);
          color: #777;
        }
      }
    }
  }
}
</style>